/**
 * 导入工具-权限相关方法
 * 1.获取token
 * 2.设置token
 * 3.清除token
 */
import { getToken, setToken, removeToken } from "@/utils/auth"
// 导入接口
import { getUserInfo, login } from "@/api/user"
import { constantRoutes, resetRouter } from "@/router"

const state = {
  //token值与缓存中连接
  token: getToken(),
  // 登录的用户信息 设置为{}防止获取时报错
  // MARK 里面的id 发散到外部getter里
  userInfo: {},
  /**
   * 用户信息不同于token
   * token是当前用户的唯一标识
   * 在一定时间内都是有效的
   * 但是用户信息可能会进行修改或者发生变化
   * 所以用户信息一般不进行缓存
   */
  // MARK 动态添加的路由不是响应式 通过state共享实现菜单
  routes: constantRoutes // 静态路由为初始值 赋值添加动态路由 菜单显示
}
// 操作state的方法合集
const mutations = {
  setToken (state, token) {
    // 逻辑：页面呈现与缓存中一致操作
    state.token = token
    // 用util工具同步操作到缓存
    setToken(token)
  },
  removeToken (state) {
    state.token = null
    removeToken()
  },
  // 设置用户信息
  setUserInfo (state, userInfo) {
    state.userInfo = userInfo
  },
  setRoutes (state, newRoutes) {
    // 顺序不能错 新路由里最后是404
    state.routes = [
      ...constantRoutes,
      ...newRoutes
    ]
  }
}
// 模块相关的请求方法合集
const actions = {
  async login (ctx, data) {
    console.log("vuex-user-action-login/data:" + data)
    // 调用登录接口
    const { token } = await login(data)
    // ctx上下文 触发mutation的指定方法 并传参
    ctx.commit('setToken', token)
  },
  // 获取用户信息
  async getUserInfo (ctx) {
    // 发送请求获取数据 注意引用api方法
    const res = await getUserInfo()
    ctx.commit("setUserInfo", res)
    return res // 返回数据 获取权限列表 应对动态路由等
  },
  // 登出用户
  logout (ctx) {
    ctx.commit('removeToken')
    ctx.commit('setUserInfo', {})
    // MARK 退出重置当前权限拥有的路由
    resetRouter()
  }
}
export default {
  /**
   * 开启命名空间
   * 避免不同模块内部的命名冲突
   */
  namespaced: true,
  state,
  mutations,
  actions
}